<template>
    <div>
        <!-- 选项式Api (OptionsApi) -->
        <h4>组合式API(CompositionApi)</h4>
        <div class="pre">
            vue2 只存在选项式API的使用语法 => 方法(对象配置) => 提供的对象配置覆盖默认配置实现程序的自定运行 <br>
            vue3 存在两种语法开发规则 => 选项式Api => 组合式Api <br>
            + 组合式Api: 语法提供一些列的内置功能方法，当程序运行时需要使用对应功能的时候，通过内置功能方法完成特定语法调用和执行 <br>
            + 组合式Api的优势：将选项时的分散配置功能，以同步代码规则进行定义呈现 <br>
        </div>
        <p>msg：{{ msg }}</p>
        <input type="text" v-model="msg">
        <input type="button" value="提示msg" @click="showMsgTip()">
        <p>msg1：{{ msg1 }}</p>
        <input type="text" v-model="msg1">
        <input type="button" value="提示msg" @click="showMsgTip1()">
        <p>info：{{ info }}</p>
        <input type="text" v-model="info">
        <input type="button" value="提示info" @click="showInfoTip()">
        <p>info1：{{ info1 }}</p>
        <input type="text" v-model="info1">
        <input type="button" value="提示info" @click="showInfoTip1()">
    </div>
</template>

<script>
import { ref } from "vue";
// 混合模式：通过选项配置 setup 属性定义组合式代码区域
export default {
    data() {
        return {
            msg:"msg变量",
            msg1:"msg1变量"
        }
    },
    methods: {
        showMsgTip() {
            alert( this.msg )
        },
        showMsgTip1(){
            alert( this.msg1 )
        }
    },
    // 组合式代码区
    setup:function(){
        // 组合式语法 ref 内置函数 ==> 构建了一个响应式数据仓库变量 ==> 构建的ref响应式变量是以 { value:值 } 方式组成的特殊对象
        //                        ==> 模板中可以直接使用 变量进行展示，因为模块会自动完成 ref 变量的value取值
        //                        ==>
        let info = ref("info变量");
        let showInfoTip = function(){
            console.log("info",info)
            alert(info.value)
        }

        let info1 = ref("info1变量");
        let showInfoTip1 = function(){
            alert(info1.value)
        }

        // 组合式Api的定义代码如果需要在模板中使用，必须对外返回
        return { info,info1,showInfoTip,showInfoTip1 }
    }
}
</script>

<style lang="scss" scoped>

</style>